<template>
  	<div ref="recommend" class="recommend">
		<scroll ref="scroll" class="recommend-content" :data="discList">
			<div>
				<div class="slider-wrapper" v-if="recommends.length">
					<slider>
						<div v-for="item of recommends" :key="item.link">
							<a :href="item.link">
								<img 
									:src="item.pic"
									class="needsclick"
									@load="loadImage"
									alt="pic"
								/>
							</a>
						</div>
					</slider>
				</div>
				<div class="recommend-list">
					<h1 class="list-title">热门歌单推荐</h1>
					<ul>
						<li
							v-for="item of discList"
							:key="item.id"
							class="item"
							@click="selectItem(item)"
						>
							<div class="icon">
								<img
									v-lazy="item.pic"
									width="60"
									height="60"
									alt="item.title"
								/>
							</div>
							<div class="text">
								<h2 class="name" v-html="item.username"></h2>
								<p class="desc" v-text="item.title"></p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="loading-container" v-show="!discList.length">
				<loading></loading>
			</div>
		</scroll>
		<keep-alive>
			<router-view></router-view>
		</keep-alive>
  	</div>
</template>

<script>
	import Slider from '@/base/slider/slider'
	import Scroll from '@/base/scroll/scroll'
	import Loading from '@/base/loading/loading'
	import { playlistMixin } from '@/common/js/mixin'
	import { getRecommend } from '@/service/recommend'
	import { mapMutations } from 'vuex'
	
	export default {
		name: 'Recommend',
		mixins: [playlistMixin],
		data() {
			return {
				recommends: [],
        		discList: []
			}
		},
		async created() {
			const result = await getRecommend();
			this.recommends = result.sliders;
			this.discList = result.albums;
		},
		components: {
			Slider,
			Scroll,
			Loading
		},
		methods: {
			handlePlaylist(playlist) {
				const bottom = playlist.length ? '60px' : '';
				this.$refs.recommend.style.bottom = bottom;
				this.$refs.scroll.refresh();
			},
			selectItem(item) {
				this.setDisc(item);
				this.$router.push(`/recommend/${item.id}`);
			},
			loadImage() {
				if (!this.checkLoaded) {
					this.$refs.scroll.refresh();
					this.checkLoaded = true;
				}
			},
			...mapMutations({
				setDisc: 'SET_DISC'
			})
		}
	}
</script>

<style lang="stylus" scoped>
    @import '../../common/stylus/variable'

    .recommend
        position: fixed
        width: 100%
        top: 88px
        bottom: 0
    .recommend-content
        height: 100%
        overflow: hidden
        .slider-wrapper
            position: relative
            width: 100%
            overflow: hidden
        .recommend-list
            .list-title
                height: 65px
                line-height: 65px
                text-align: center
                font-size: $font-size-medium
                color: $color-theme
        .item
            display: flex
            box-sizing: border-box
            align-items: center
            padding: 0 20px 20px 20px
            .icon
                flex: 0 0 60px
                width: 60px
                padding-right: 20px
            .text
                display: flex
                flex-direction: column
                justify-content: center
                flex: 1
                line-height: 20px
                overflow: hidden
                font-size: $font-size-medium
            .name
                margin-bottom: 10px
                color: $color-text
            .desc
                color: $color-text-d
        .loading-container
            position: absolute
            width: 100%
            top: 50%
            transform: translateY(-50%)
</style>